<template>
  <div class="quiz-game">
    <h1>闯关游戏</h1>
    <div v-if="currentQuestion" class="question-container">
      <h2>第 {{ currentLevel }} 关</h2>
      <p>{{ currentQuestion.question }}</p>
      <button v-for="(option, index) in currentQuestion.options" :key="index" @click="checkAnswer(option)"
        class="option-button">
        {{ option }}
      </button>
    </div>
    <div v-else class="game-over">
      <h2>恭喜你，通关了！</h2>
      <button @click="restartGame" class="restart-button">重新开始</button>
    </div>
  </div>
</template>

<script>
import { Howl } from 'howler';

export default {
  data() {
    return {
      currentLevel: 1,
      questions: [
        {
          question: "1 + 1 = ?",
          options: ["1", "2", "3", "4"],
          answer: "2"
        },
        {
          question: "2 * 2 = ?",
          options: ["2", "4", "6", "8"],
          answer: "4"
        },
        {
          question: "3 + 3 = ?",
          options: ["3", "6", "9", "12"],
          answer: "6"
        }
      ],
      currentQuestion: null,
      correctSound: new Howl({
        src: ['https://www.soundjay.com/button/beep-07.wav']
      }),
      wrongSound: new Howl({
        src: ['https://www.soundjay.com/button/beep-01a.wav']
      })
    };
  },
  created() {
    this.currentQuestion = this.questions[this.currentLevel - 1];
  },
  methods: {
    checkAnswer(option) {
      if (option === this.currentQuestion.answer) {
        this.correctSound.play();
        this.currentLevel++;
        if (this.currentLevel <= this.questions.length) {
          this.currentQuestion = this.questions[this.currentLevel - 1];
        } else {
          this.currentQuestion = null;
        }
      } else {
        this.wrongSound.play();
        this.$message.error("回答错误，请再试一次！");
      }
    },
    restartGame() {
      this.currentLevel = 1;
      this.currentQuestion = this.questions[this.currentLevel - 1];
    }
  }
};
</script>

<style scoped>
.quiz-game {
  text-align: center;
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
  min-height: 100vh;
}

.question-container {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 20px auto;
  max-width: 400px;
}

.option-button {
  margin: 10px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  background: #42b983;
  color: white;
  transition: background 0.3s ease;
}

.option-button:hover {
  background: #369f6e;
}

.game-over {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 20px auto;
  max-width: 400px;
}

.restart-button {
  margin: 10px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  background: #f56565;
  color: white;
  transition: background 0.3s ease;
}

.restart-button:hover {
  background: #e53e3e;
}
</style>
